<!DOCTYPE html>
<html lang="en">
<head>
    <title>插件页面</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/matrix-style.css"/>
    <link rel="stylesheet" href="css/matrix-media.css"/>
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">MatAdmin</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
    <ul class="nav">
        <li class="dropdown" id="profile-messages"><a title="" href="#" data-toggle="dropdown"
                                                      data-target="#profile-messages" class="dropdown-toggle"><i
                class="icon icon-user"></i> <span class="text">欢迎Admin</span><b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-user"></i> 我的资料</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="icon-check"></i> 我的任务</a></li>
                <li class="divider"></li>
                <li><a href="login.html"><i class="icon-key"></i> 退出</a></li>
            </ul>
        </li>
        <li class="dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages"
                                                   class="dropdown-toggle"><i class="icon icon-envelope"></i> <span
                class="text">消息</span> <span class="label label-important">5</span> <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a class="sAdd" title="" href="#"><i class="icon-plus"></i> 新消息</a></li>
                <li class="divider"></li>
                <li><a class="sInbox" title="" href="#"><i class="icon-envelope"></i> 收件箱</a></li>
                <li class="divider"></li>
                <li><a class="sOutbox" title="" href="#"><i class="icon-arrow-up"></i> 发件箱</a></li>
                <li class="divider"></li>
                <li><a class="sTrash" title="" href="#"><i class="icon-trash"></i> 发送</a></li>
            </ul>
        </li>
        <li class=""><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">设置</span></a></li>
        <li class=""><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a>
        </li>
    </ul>
</div>
<!--start-top-serch-->
<div id="search">
    <input type="text" placeholder="输入搜索内容..."/>
    <button type="submit" class="tip-bottom" title="Search"><i class="icon-search icon-white"></i></button>
</div>
<!--close-top-serch-->

<!--sidebar-menu-->
<div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-inbox"></i> Widgets</a>
    <ul>
        <li><a href="index.html"><i class="icon icon-home"></i> <span>首页</span></a></li>
        <li><a href="charts.html"><i class="icon icon-signal"></i> <span>图表统计</span></a></li>
        <li class="active"><a href="widgets.html"><i class="icon icon-inbox"></i> <span>插件</span></a></li>
        <li><a href="tables.html"><i class="icon icon-th"></i> <span>数据表格</span></a></li>
        <li><a href="grid.html"><i class="icon icon-fullscreen"></i> <span>网格布局</span></a></li>
        <li class="submenu"><a href="#"><i class="icon icon-th-list"></i> <span>表单</span> </a>
            <ul>
                <li><a href="form-common.html">基本表单</a></li>
                <li><a href="form-validation.html">带验证的表单</a></li>
                <li><a href="form-wizard.html">带提示的表单</a></li>
            </ul>
        </li>
        <li><a href="buttons.html"><i class="icon icon-tint"></i> <span>按钮 &amp; 图标</span></a></li>
        <li><a href="interface.html"><i class="icon icon-pencil"></i> <span>组件</span></a></li>
        <li class="submenu"><a href="#"><i class="icon icon-file"></i> <span>其他</span> </a>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="gallery.html">相册</a></li>
                <li><a href="calendar.html">日历</a></li>
                <li><a href="invoice.html">清单</a></li>
                <li><a href="chat.html">聊天</a></li>
            </ul>
        </li>
        <li class="submenu"><a href="#"><i class="icon icon-info-sign"></i> <span>错误页面</span> </a>
            <ul>
                <li><a href="error403.html">403错误页面</a></li>
                <li><a href="error/error404.html">404错误页面</a></li>
                <li><a href="error405.html">05错误页面</a></li>
                <li><a href="error500.html">500错误页面</a></li>
            </ul>
        </li>
        <li class="content"><span>每个月带宽</span>
            <div class="progress progress-mini progress-danger active progress-striped">
                <div style="width: 77%;" class="bar"></div>
            </div>
            <span class="percent">77%</span>
            <div class="stat">21419.94 / 14000 MB</div>
        </li>
        <li class="content"><span>Disk Space Usage</span>
            <div class="progress progress-mini active progress-striped">
                <div style="width: 87%;" class="bar"></div>
            </div>
            <span class="percent">87%</span>
            <div class="stat">604.44 / 4000 MB</div>
        </li>
    </ul>
</div>
<!--sidebar-menu-->

<!--main-container-part-->
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"><a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a
                href="#" class="current">Widgets</a></div>
        <h1>Widgets</h1>
    </div>
    <div class="container-fluid">
        <hr>
        <div class="row-fluid">
            <div class="span6">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-file"></i> </span>
                        <h5>Recent Posts</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <ul class="recent-posts">
                            <li>
                                <div class="user-thumb"><img width="40" height="40" alt="User" src="img/demo/av1.jpg">
                                </div>
                                <div class="article-post">
                                    <div class="fr"><a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#"
                                                                                                             class="btn btn-success btn-mini">Publish</a>
                                        <a href="#" class="btn btn-danger btn-mini">Delete</a></div>
                                    <span class="user-info"> By: john Deo / Date: 2 Aug 2012 / Time:09:27 AM </span>
                                    <p><a href="#">This is a much longer one that will go on for a few lines.It has
                                        multiple paragraphs and is full of waffle to pad out the comment.</a></p>
                                </div>
                            </li>
                            <li>
                                <div class="user-thumb"><img width="40" height="40" alt="User" src="img/demo/av2.jpg">
                                </div>
                                <div class="article-post">
                                    <div class="fr"><a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#"
                                                                                                             class="btn btn-success btn-mini">Publish</a>
                                        <a href="#" class="btn btn-danger btn-mini">Delete</a></div>
                                    <span class="user-info"> By: john Deo / Date: 2 Aug 2012 / Time:09:27 AM </span>
                                    <p><a href="#">This is a much longer one that will go on for a few lines.It has
                                        multiple paragraphs and is full of waffle to pad out the comment.</a></p>
                                </div>
                            </li>
                            <li>
                                <div class="user-thumb"><img width="40" height="40" alt="User" src="img/demo/av3.jpg">
                                </div>
                                <div class="article-post">
                                    <div class="fr"><a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#"
                                                                                                             class="btn btn-success btn-mini">Publish</a>
                                        <a href="#" class="btn btn-danger btn-mini">Delete</a></div>
                                    <span class="user-info"> By: john Deo / Date: 2 Aug 2012 / Time:09:27 AM </span>
                                    <p><a href="#">This is a much longer one that will go on for a few lines.Itaffle to
                                        pad out the comment.</a></p>
                                </div>
                            <li>
                                <button class="btn btn-warning btn-mini">View All</button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="accordion" id="collapse-group">
                    <div class="accordion-group widget-box">
                        <div class="accordion-heading">
                            <div class="widget-title"><a data-parent="#collapse-group" href="#collapseGOne"
                                                         data-toggle="collapse"> <span class="icon"><i
                                    class="icon-ok"></i></span>
                                <h5>Accordion option1</h5>
                            </a></div>
                        </div>
                        <div class="collapse in accordion-body" id="collapseGOne">
                            <div class="widget-content"> This is opened by default</div>
                        </div>
                    </div>
                    <div class="accordion-group widget-box">
                        <div class="accordion-heading">
                            <div class="widget-title"><a data-parent="#collapse-group" href="#collapseGTwo"
                                                         data-toggle="collapse"> <span class="icon"><i
                                    class="icon-circle-arrow-right"></i></span>
                                <h5>Accordion closed</h5>
                            </a></div>
                        </div>
                        <div class="collapse accordion-body" id="collapseGTwo">
                            <div class="widget-content"> Another is open</div>
                        </div>
                    </div>
                    <div class="accordion-group widget-box">
                        <div class="accordion-heading">
                            <div class="widget-title"><a data-parent="#collapse-group" href="#collapseGThree"
                                                         data-toggle="collapse"> <span class="icon"><i
                                    class="icon-eye-open"></i></span>
                                <h5>Accordion closed</h5>
                            </a></div>
                        </div>
                        <div class="collapse accordion-body" id="collapseGThree">
                            <div class="widget-content"> Another is open</div>
                        </div>
                    </div>
                </div>
                <div class="widget-box collapsible">
                    <div class="widget-title"><a href="#collapseOne" data-toggle="collapse"> <span class="icon"><i
                            class="icon-arrow-right"></i></span>
                        <h5>Toggle, Open by default</h5>
                    </a></div>
                    <div class="collapse in" id="collapseOne">
                        <div class="widget-content"> This box is opened by default</div>
                    </div>
                    <div class="widget-title"><a href="#collapseTwo" data-toggle="collapse"> <span class="icon"><i
                            class="icon-remove"></i></span>
                        <h5>Toggle, closed by default</h5>
                    </a></div>
                    <div class="collapse" id="collapseTwo">
                        <div class="widget-content"> This box is now open</div>
                    </div>
                    <div class="widget-title"><a href="#collapseThree" data-toggle="collapse"> <span class="icon"><i
                            class="icon-remove"></i></span>
                        <h5>Toggle, closed by default</h5>
                    </a></div>
                    <div class="collapse" id="collapseThree">
                        <div class="widget-content"> This box is now open</div>
                    </div>
                </div>
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-refresh"></i> </span>
                        <h5>News updates</h5>
                    </div>
                    <div class="widget-content nopadding updates">
                        <div class="new-update clearfix"><i class="icon-ok-sign"></i>
                            <div class="update-done"><a href="#" title=""><strong>Lorem ipsum dolor sit amet,
                                consectetur adipiscing elit.</strong></a> <span>dolor sit amet, consectetur adipiscing eli</span>
                            </div>
                            <div class="update-date"><span class="update-day">20</span>jan</div>
                        </div>
                        <div class="new-update clearfix"><i class="icon-gift"></i> <span class="update-notice"> <a
                                href="#" title=""><strong>Congratulation Maruti, Happy Birthday </strong></a> <span>many many happy returns of the day</span> </span>
                            <span class="update-date"><span class="update-day">11</span>jan</span></div>
                        <div class="new-update clearfix"><i class="icon-move"></i> <span class="update-alert"> <a
                                href="#" title=""><strong>Maruti is a Responsive Admin theme</strong></a> <span>But already everything was solved. It will ...</span> </span>
                            <span class="update-date"><span class="update-day">07</span>Jan</span></div>
                        <div class="new-update clearfix"><i class="icon-leaf"></i> <span class="update-done"> <a
                                href="#" title=""><strong>Envato approved Maruti Admin template</strong></a> <span>i am very happy to approved by TF</span> </span>
                            <span class="update-date"><span class="update-day">05</span>jan</span></div>
                        <div class="new-update clearfix"><i class="icon-question-sign"></i> <span class="update-notice"> <a
                                href="#" title=""><strong>I am alwayse here if you have any question</strong></a> <span>we glad that you choose our template</span> </span>
                            <span class="update-date"><span class="update-day">01</span>jan</span></div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"><i class="icon-time"></i></span>
                        <h5>To Do List</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Opts</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="taskDesc"><i class="icon-info-sign"></i> Making The New Suit</td>
                                <td class="taskStatus"><span class="in-progress">in progress</span></td>
                                <td class="taskOptions"><a href="#" class="tip-top" data-original-title="Update"><i
                                        class="icon-ok"></i></a> <a href="#" class="tip-top"
                                                                    data-original-title="Delete"><i
                                        class="icon-remove"></i></a></td>
                            </tr>
                            <tr>
                                <td class="taskDesc"><i class="icon-plus-sign"></i> Luanch My New Site</td>
                                <td class="taskStatus"><span class="pending">pending</span></td>
                                <td class="taskOptions"><a href="#" class="tip-top" data-original-title="Update"><i
                                        class="icon-ok"></i></a> <a href="#" class="tip-top"
                                                                    data-original-title="Delete"><i
                                        class="icon-remove"></i></a></td>
                            </tr>
                            <tr>
                                <td class="taskDesc"><i class="icon-ok-sign"></i> Maruti Excellant Theme</td>
                                <td class="taskStatus"><span class="done">done</span></td>
                                <td class="taskOptions"><a href="#" class="tip-top" data-original-title="Update"><i
                                        class="icon-ok"></i></a> <a href="#" class="tip-top"
                                                                    data-original-title="Delete"><i
                                        class="icon-remove"></i></a></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="widget-box">
                    <div class="widget-title">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
                            <li><a data-toggle="tab" href="#tab2">Tab2</a></li>
                            <li><a data-toggle="tab" href="#tab3">Tab3</a></li>
                        </ul>
                    </div>
                    <div class="widget-content tab-content">
                        <div id="tab1" class="tab-pane active">
                            <p>And is full of waffle to It has multiple paragraphs and is full of waffle to pad out the
                                comment. Usually, you just wish these sorts of comments would come to an end.multiple
                                paragraphs and is full of waffle to pad out the comment. Usually, you just wish these
                                sorts of comments would come to an end.multiple paragraphs and is full of waffle to pad
                                out the comment. Usually, you just wish these sorts of comments would come to an
                                end. </p>
                        </div>
                        <div id="tab2" class="tab-pane">
                            <p> waffle to pad out the comment. Usually, you just wish these sorts of comments would come
                                to an end.multiple paragraphs and is full of waffle to pad out the comment. Usually, you
                                just wish these sorts of comments would come to an end. </p>
                        </div>
                        <div id="tab3" class="tab-pane">
                            <p>full of waffle to pad out the comment. Usually, you just wish these sorts of comments
                                would come to an end.multiple paragraphs and is full of waffle to pad out the comment.
                                Usually, you just wish these sorts of comments would come to an end. </p>
                        </div>
                    </div>
                </div>
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"><i class="icon-repeat"></i></span>
                        <h5>Recent Activity</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <ul class="activity-list">
                            <li><a href="#"> <i class="icon-user"></i> <strong>Themeforest</strong>Approved My college
                                theme <strong>1 user</strong> <span>2 hours ago</span> </a></li>
                            <li><a href="#"> <i class="icon-file"></i> <strong>My College is PSD Template </strong>
                                Theme <strong>Psd Theme</strong> <span>2months ago</span> </a></li>
                            <li><a href="#"> <i class="icon-envelope"></i> <strong>Lorem ipsum doler set</strong>
                                adag<strong>agg</strong> <span>2 days ago</span> </a></li>
                            <li><a href="#"> <i class="icon-picture"></i> <strong>ITs my First Admin</strong> so
                                very<strong>exited</strong> <span>2 days ago</span> </a></li>
                            <li><a href="#"> <i class="icon-user"></i> <strong>Admin</strong> bans <strong>3
                                users</strong> <span>week ago</span> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"><i class="icon-ok"></i></span>
                        <h5>To Do list</h5>
                    </div>
                    <div class="widget-content">
                        <div class="todo">
                            <ul>
                                <li class="clearfix">
                                    <div class="txt"> Luanch This theme on Themeforest <span
                                            class="by label">Nirav</span> <span
                                            class="date badge badge-important">Today</span></div>
                                    <div class="pull-right"><a class="tip" href="#" title="Edit Task"><i
                                            class="icon-pencil"></i></a> <a class="tip" href="#" title="Delete"><i
                                            class="icon-remove"></i></a></div>
                                </li>
                                <li class="clearfix">
                                    <div class="txt"> Manage Pending Orders <span class="by label">Alex</span> <span
                                            class="date badge badge-warning">Today</span></div>
                                    <div class="pull-right"><a class="tip" href="#" title="Edit Task"><i
                                            class="icon-pencil"></i></a> <a class="tip" href="#" title="Delete"><i
                                            class="icon-remove"></i></a></div>
                                </li>
                                <li class="clearfix">
                                    <div class="txt"> MAke your desk clean <span class="by label">Admin</span> <span
                                            class="date badge badge-success">Tomorrow</span></div>
                                    <div class="pull-right"><a class="tip" href="#" title="Edit Task"><i
                                            class="icon-pencil"></i></a> <a class="tip" href="#" title="Delete"><i
                                            class="icon-remove"></i></a></div>
                                </li>
                                <li class="clearfix">
                                    <div class="txt"> Today we celebrate the great looking theme <span class="by label">Admin</span>
                                        <span class="date badge badge-info">08.03.2013</span></div>
                                    <div class="pull-right"><a class="tip" href="#" title="Edit Task"><i
                                            class="icon-pencil"></i></a> <a class="tip" href="#" title="Delete"><i
                                            class="icon-remove"></i></a></div>
                                </li>
                                <li class="clearfix">
                                    <div class="txt"> Manage all the orders <span class="by label">Mark</span> <span
                                            class="date badge badge-info">12.03.2013</span></div>
                                    <div class="pull-right"><a class="tip" href="#" title="Edit Task"><i
                                            class="icon-pencil"></i></a> <a class="tip" href="#" title="Delete"><i
                                            class="icon-remove"></i></a></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"><i class="icon-ok"></i></span>
                        <h5>To Do list</h5>
                    </div>
                    <div class="widget-content">
                        <ul class="unstyled">
                            <li><span class="icon24 icomoon-icon-arrow-up-2 green"></span> 81% Clicks <span
                                    class="pull-right strong">567</span>
                                <div class="progress progress-striped ">
                                    <div style="width: 81%;" class="bar"></div>
                                </div>
                            </li>
                            <li><span class="icon24 icomoon-icon-arrow-up-2 green"></span> 72% Uniquie Clicks <span
                                    class="pull-right strong">507</span>
                                <div class="progress progress-success progress-striped ">
                                    <div style="width: 72%;" class="bar"></div>
                                </div>
                            </li>
                            <li><span class="icon24 icomoon-icon-arrow-down-2 red"></span> 53% Impressions <span
                                    class="pull-right strong">457</span>
                                <div class="progress progress-warning progress-striped ">
                                    <div style="width: 53%;" class="bar"></div>
                                </div>
                            </li>
                            <li><span class="icon24 icomoon-icon-arrow-up-2 green"></span> 3% Online Users <span
                                    class="pull-right strong">8</span>
                                <div class="progress progress-danger progress-striped ">
                                    <div style="width: 3%;" class="bar"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row-fluid">
            <div class="span4">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-eye-open"></i> </span>
                        <h5>Browesr statistics</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>Browser</th>
                                <th>Visits</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Chrome</td>
                                <td>8850</td>
                            </tr>
                            <tr>
                                <td>Firefox</td>
                                <td>5670</td>
                            </tr>
                            <tr>
                                <td>Internet Explorer</td>
                                <td>4130</td>
                            </tr>
                            <tr>
                                <td>Opera</td>
                                <td>1574</td>
                            </tr>
                            <tr>
                                <td>Safari</td>
                                <td>1044</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-arrow-right"></i> </span>
                        <h5>Website statistics</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>Site</th>
                                <th>Visits</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><a href="#">Themeforest.com</a></td>
                                <td>12444</td>
                            </tr>
                            <tr>
                                <td><a href="#">Themedesigner.in</a></td>
                                <td>10455</td>
                            </tr>
                            <tr>
                                <td><a href="#">Themedesigner.in</a></td>
                                <td>8455</td>
                            </tr>
                            <tr>
                                <td><a href="#">Themedesigner.in</a></td>
                                <td>4456</td>
                            </tr>
                            <tr>
                                <td><a href="#">Themedesigner.in</a></td>
                                <td>2210</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-file"></i> </span>
                        <h5>Visited Pages</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>Page</th>
                                <th>Visits</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><a href="#">Freebies</a></td>
                                <td>8550</td>
                            </tr>
                            <tr>
                                <td><a href="#">Blog</a></td>
                                <td>7550</td>
                            </tr>
                            <tr>
                                <td><a href="#">Work</a></td>
                                <td>5247</td>
                            </tr>
                            <tr>
                                <td><a href="#">site template</a></td>
                                <td>4880</td>
                            </tr>
                            <tr>
                                <td><a href="#">All categories</a></td>
                                <td>4801</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--main-container-part-->

<!--Footer-part-->
<div class="row-fluid">
    <div id="footer" class="span12">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                                              href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </div>
</div>
<!--end-Footer-part-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/matrix.js"></script>
</body>
</html>
